<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="js/google-code-prettify/prettify.css" type="text/css"
	rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet">

</head>
<body onload="prettyPrint();">
	<table class="table" id="table">

		<thead>
			<tr>
				<th class="span3">描述</th>
				<th>代码</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
						操作dom元素本身就比较耗时。
						避免循环查看dom，修改dom
					
				</td>
				<td>
				
				<div>
				<pre class="prettyprint">
				<code id="code1">
					(function(window){
						var body = document.getElementById("body");
						for(var i =0;i<1500;i++ ){
							body.innerHTML+=i;
						}
					})(window);
				</code>
				</pre>
				<div class="info">运行时间：
				<span class="label label-success" id="time-code1"></span>毫秒
				</div>
				<button class="btn btnrun" aim="code1">运行</button>
				</div>
				
				
				<div>
				<pre class="prettyprint">
				<code id="code2">
					(function(window){
						var body = document.getElementById("body");
						var s = ""
						for(var i =0;i<1500;i++ ){
							s+=i;
						}
						body.innerHTML = s;
					})(window);
				</code>
				</pre>
				<div class="info">运行时间：
				<span class="label label-success" id="time-code2"></span>毫秒
				</div>
				<button class="btn btnrun" aim="code2">运行</button>
				</div>
				<div class="alert alert-success">
				尽量不要dom循环操作
				</div>
				</td>
			</tr>
			<tr>
				<td>htmlConction</td>
				<td>
				
				<div>
				<pre class="prettyprint">
				<code id="code3">
					
				</code>
				</pre>
				<div class="info">运行时间：
				<span class="label label-success" id="time-code3"></span>毫秒
				</div>
				<button class="btn btnrun" aim="code3">运行</button>
				</div>
				
				<div class="alert alert-success">
				dom改变，htmlConction里面的内容会自动更新
				</div>
				</td>
			</tr>
			<tr>
				<td>dom改变布局和不改变布局性能影响</td>
				<td>
				
				<div>
				<pre class="prettyprint">
				<code id="code4">
					(function(){
						var body = document.getElementById("body");
						for(var i=0;i<1000;i++){
							if(i%2==0){
								body.style.display = "none";
							}else{
								body.style.display = "block";
							}
						} 
					})()
				</code>
				</pre>
				<div class="info">运行时间：
				<span class="label label-success" id="time-code4"></span>毫秒
				</div>
				<button class="btn btnrun" aim="code4">运行</button>
				</div>
				<div>
				<pre class="prettyprint">
				<code id="code5">
					(function(){
						var body = document.getElementById("body");
						for(var i=0;i<1000;i++){
							if(i%2==0){
								body.style.visibility = "visible";
							}else{
								body.style.visibility = "hidden";
							}
						} 
					})()
				</code>
				</pre>
				<div class="info">运行时间：
				<span class="label label-success"  id="time-code5"></span>毫秒
				</div>
				<button class="btn btnrun" aim="code5">运行</button>
				</div>
				<div class="alert alert-success">
				dom改变，htmlConction里面的内容会自动更新
				</div>
				</td>
			</tr>
		</tbody>

	</table>
	
	
<div id="body" >
</div>
<script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</body>

</html>